import React, { useRef, memo, useState, useEffect } from 'react';
import { Row, Col, Form, Button, MessagePlugin, Select } from 'tdesign-react';
import { CONTRACT_STATUS_OPTIONS, CONTRACT_STATUS_ORDER, CONTRACT_TYPE_OPTIONS } from '../consts';
import { FormInstanceFunctions, SubmitContext } from 'tdesign-react/es/form/type';
import PubSub from 'pubsub-js'
const { FormItem } = Form;

export type FormValueType = {
  name?: string;
  status?: string;
  number?: string;
  time?: string;
  type?: string;
};

export type SearchFormProps = {
  onCancel: () => void;
  onSubmit: (values: FormValueType) => Promise<void>;
};

const SearchForm: React.FC<SearchFormProps> = (props) => {
  const formRef = useRef<FormInstanceFunctions>();
  const [path, setPath] = useState<string>('');

  useEffect(() => {
    // 订阅当前的路由
    const token = PubSub.subscribe('listPath', (msg, data) => {
      setPath(data);
    });

    // 组件卸载时取消订阅
    return () => {
      PubSub.unsubscribe(token);
    };
  }, []);

  const onSubmit = (e: SubmitContext) => {
    if (e.validateResult === true) {
      MessagePlugin.info('提交成功');
    }
    const queryValue = formRef?.current?.getFieldsValue?.(true);
    console.log('form 数据', queryValue);
  };

  const onReset = () => {
    props.onCancel();
    MessagePlugin.info('重置成功');
  };

  return (
    <div className='list-common-table-query'>
      <Form ref={formRef} onSubmit={onSubmit} onReset={onReset} labelWidth={80} colon>
        <Row>
          <Col flex='1'>
            <Row gutter={[16, 16]}>
              <Col span={4} xs={12} sm={6} xl={4}>
                <FormItem label='排序依据' name='sort'>
                  <Select options={CONTRACT_STATUS_OPTIONS} placeholder='请选择排序依据' />
                </FormItem>
              </Col>
              <Col span={4} xs={12} sm={6} xl={4}>
                <FormItem label='排序方式' name='order'>
                  <Select options={CONTRACT_STATUS_ORDER} placeholder='请选择排序方式' />
                </FormItem>
              </Col>
              <Col span={4} xs={12} sm={6} xl={4}>
                <FormItem label='审批状态' name='status'>
                  <Select options={CONTRACT_TYPE_OPTIONS} placeholder='请选择审批状态' />
                </FormItem>
              </Col>
            </Row>
          </Col>
          <Col flex='280px'>
            <Button theme='primary' type='submit' style={{ margin: '0px 20px' }}>
              查询
            </Button>
            <Button type='reset' variant='base' theme='default' style={{ position: "relative", margin: '0px 20px 0 0' }}>
              重置
            </Button>
            {
              path === 'userManage' && (
                <Button theme='primary' type='submit'>
                  新建用户
                </Button>
              )
            }{
              path === 'floorManage' && (
                <Button theme='primary' type='submit'>
                  新建楼层
                </Button>
              )}{
              path === 'roomManage' && (
                <Button theme='primary' type='submit'>
                  新建包间
                </Button>
              )}
            {
              path === 'messageManage' && (
                <Button theme='primary' type='submit'>
                  新建通知
                </Button>
              )
            }
          </Col>
        </Row>
      </Form>
    </div>
  );
};

export default memo(SearchForm);
